﻿@{
    ViewBag.Title = "新增产品";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
@section header{
    <link href="~/Content/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/js/plugs/webuploader/webuploader.css" rel="stylesheet" type="text/css" />
}

<div class="page-container">
    <div class="page-body">
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div id="simplewizard" class="wizard" data-target="#simplewizard-steps">
                    <ul class="steps">
                        <li data-target="#basicInfoStep" class="active"><span class="step">1</span><span class="title">基础信息</span> <span class="chevron"></span></li>
                        <li data-target="#attributeStep"><span class="step">2</span><span class="title">产品属性</span> <span class="chevron"></span></li>
                        <li data-target="#picInfoStep"><span class="step">3</span><span class="title">产品图片</span> <span class="chevron"></span></li>
                        <li data-target="#confirmInfoStep"><span class="step">4</span><span class="title">确认信息</span> <span class="chevron"></span></li>
                    </ul>
                </div>

                <div class="step-content" id="simplewizard-steps">
                    <!--基础信息-->
                    <div class="step-pane active" id="basicInfoStep">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label no-padding-right"><span style="color:red;">*&nbsp;</span>产品名称：</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="name" v-model="product.name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="price" class="col-sm-2 control-label no-padding-right"><span style="color:red;">*&nbsp;</span>价格：</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="price" v-model="product.price">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="isOnShelf" class="col-sm-2 control-label no-padding-right"><span style="color:red;">*&nbsp;</span>是否上架：</label>
                                <div class="col-sm-6">
                                    <select id="isOnShelf" v-model="product.isOnShelf">
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="classifyId" class="col-sm-2 control-label no-padding-right"><span style="color:red;">*&nbsp;</span>所属分类：</label>
                                <div class="col-sm-6">
                                    <select id="classifyId" v-model="product.classifyId" v-on:change="classifyChange()">
                                        <option v-for="option in classifies" v-bind:value="option.Value">
                                            {{ option.Name }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!--产品属性-->
                    <div class="step-pane" id="attributeStep">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="tabbable">
                                    <ul class="nav nav-tabs tabs-flat">
                                        <template v-for="(index,group) in product.groupAttributes">
                                            <li class="tab-sky">
                                                <a data-toggle="tab" href="#group{{index}}" aria-expanded="true">
                                                    {{group.groupName}}
                                                </a>
                                            </li>
                                        </template>
                                    </ul>

                                    <div class="tab-content  tabs-flat">
                                        <template v-for="(index,group) in product.groupAttributes">
                                            <div id="group{{index}}" class="tab-pane" style="width:99%">
                                                <form class="form-horizontal" role="form">
                                                    <template v-for="attribute in group.attributes">
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label no-padding-right"><span v-if="attribute.isRequired" style="color:red;">*&nbsp;</span>{{attribute.name}}：</label>
                                                            <div class="col-sm-6">
                                                                <!--选择-->
                                                                <select v-if="attribute.attributeType==4" class="form-control" id="atrribute_{{attribute.id}}">
                                                                    <option>1</option>
                                                                    <option>2</option>
                                                                    <option>3</option>
                                                                </select>
                                                                <template v-else>
                                                                    <!--富文本-->
                                                                    <script v-if="attribute.attributeType==6" id="atrribute_{{attribute.id}}" data-type="{{attribute.attributeType}}" name="content" type="text/plain">
                                                                    </script>
                                                                    <template v-else>
                                                                        <!--图片-->
                                                                        <template v-if="attribute.attributeType==7">
                                                                            <img style="width:160px;height:90px;" id="img_{{attribute.id}}" v-bind:src="attribute.value" />
                                                                            <div id="upload_{{attribute.id}}"  data-type="{{attribute.attributeType}}">选择图片</div>
                                                                        </template>
                                                                        <input v-else type="text" class="form-control" id="atrribute_{{attribute.id}}" data-name="{{attribute.name}}" data-required="{{attribute.isRequired}}" data-reg="{{attribute.validateRegular}}" data-type="{{attribute.attributeType}}" v-model="attribute.value">
                                                                    </template>
                                                                </template>
                                                            </div>
                                                            <div class="col-sm-2" style="margin-top:7px;">{{attribute.tips}}</div>
                                                        </div>
                                                    </template>
                                                </form>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--产品图片-->
                    <div class="step-pane" id="picInfoStep">
                        <form class="form-horizontal form-bordered" role="form">
                            <div class="form-group">
                                <div id="upload_cover" class="col-sm-2 control-label no-padding-right">上传封面</div>
                                <div class="col-sm-6">
                                    <img style="width:160px;height:90px;" id="img_cover" v-bind:src="product.cover" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div id="upload_cover" class="col-sm-2 control-label no-padding-right">上传相册</div>
                                <div class="col-sm-6">
                                    <img style="width:160px;height:90px;" id="img_album" v-bind:src="product.cover" />
                                </div>
                            </div>
                        </form>
                    </div>

                    <!--确认信息-->
                    <div class="step-pane" id="confirmInfoStep">
                        <table class="table table-bordered table-hover">
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <div class="actions actions-footer" id="simplewizard-actions">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-prev"> <i class="fa fa-angle-left"></i>上一步</button>
                        <button type="button" class="btn btn-default btn-next">下一步<i class="fa fa-angle-right"></i></button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@section footer{
    <script src="~/Content/js/bode/bode.wizard.js" type="text/javascript"></script>

    <script src="~/Content/js/plugs/datetime/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/datetime/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/webuploader/webuploader.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/ueditor/ueditor.config.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/ueditor/ueditor.all.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            //$("#simplewizard-steps").height($(window).height() - 160);
            
            var attributeInitialized=false;
            var vm = new Vue({
                el: "#simplewizard-steps",
                data: {
                    product: {
                        name: "",
                        price: 0.00,
                        cover:"",
                        isOnShelf: "false",
                        classifyId: 0,
                        groupAttributes: [],
                        extendAttributes: [],
                        albums:[]
                    },
                    classifies: @Html.Raw(Json.Encode(ViewBag.Classifies))
                },
                methods: {
                    classifyChange:function(){
                        var self=this;
                        if(!self.product.classifyId)return;
                        $.bode.ajax("/api/services/product/attributes/GetClassifyGroupAttributes",{id:parseInt(self.product.classifyId)},function(gruops){
                            self.product.groupAttributes=gruops;
                            $("script[data-type='6']").each(function(){
                                var id=$(this).attr("id");
                                UE.getEditor(id).destroy();
                            });
                            attributeInitialized=false;
                        });
                    },
                    deleteAlbum:function(path){
                    
                    }
                },
                created: function () { },
            });
            
            //初始化封面上传控件
            var coverUploader = WebUploader.create({
                auto: true,// 选完文件后，是否自动上传。
                swf: '/Content/js/plugs/webuploader/Uploader.swf',// swf文件路径
                server: "/api/File/UploadPic",// 文件接收服务端。
                pick: '#upload_cover',
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            coverUploader.on("uploadSuccess", function (file, resp) {
                vm.product.cover=resp;
            });

            //初始化wizard插件
            var wizard = new $.bode.wizard("#simplewizard", {
                onNextClick: function() {
                    var stepName = $("#simplewizard-steps").find(".active").attr("id");
                    if (stepName === "basicInfoStep") {
                        setTimeout(function(){
                            $("#attributeStep li.tab-sky:eq(0)>a").click();
                            if(!attributeInitialized){
                                //初始化属性控件
                                $.bode.tools.input.formatDiscount($("input[data-type='2']"));
                                $.bode.tools.input.formatTime($("input[data-type='5']"));
                                $("script[data-type='6']").each(function(){
                                    var id=$(this).attr("id");
                                    UE.getEditor(id);
                                });
                                $("div[data-type='7']").each(function(){
                                    var uploader = WebUploader.create({
                                        auto: true,// 选完文件后，是否自动上传。
                                        swf: '/Content/js/plugs/webuploader/Uploader.swf',// swf文件路径
                                        server: "/api/File/UploadPic",// 文件接收服务端。
                                        pick: '#'+$(this).attr("id"),
                                        accept: {
                                            title: 'Images',
                                            extensions: 'gif,jpg,jpeg,bmp,png',
                                            mimeTypes: 'image/*'
                                        }
                                    });
                                    uploader.on("uploadSuccess", function (file, resp) {
                                        $(this.options.pick.replace("upload","img")).attr("src", resp);
                                    });
                                });
                                attributeInitialized=true;
                            }
                        },400);
                    }else if (stepName === "attributeStep") {
                    }else if (stepName === "picInfoStep"){
                    }
                    return true;
                },
                onPreClick:function(){
                    var stepName = $("#simplewizard-steps").find(".active").attr("id");
                    if(stepName === "picInfoStep"){
                        setTimeout(function(){
                            $("#attributeStep li.tab-sky:eq(0)>a").click();
                        },400);
                    }
                    return true;
                },
                onFinish: function() {
                    return false;
                }
            });
        });
</script>    
}

